<template>
  <div data-v-search class="search">
    <div class="top-box">
      <NewTopNav></NewTopNav>
    </div>
    <div class="body-box">
      <div class="body-header">
        <el-input
          class="search-input"
          placeholder="发现更多有趣的事情"
          v-model="searchValue"
          @keyup.enter.native="getSearch"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="body-content">
        <div class="tab-list">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="视频" name="video">
              <div class="video-box">
                <div
                  class="video-item"
                  v-for="item in videoList"
                  :key="item.id"
                >
                  <img :src="item.cover" alt="" @click="toVideoDesc(item.id)" />
                  <p>{{ item.title }}</p>
                  <span
                    ><i @click="toHomePage(item.video_issuer)">{{
                      item.username
                    }}</i
                    ><i>{{ item.upload_date }}</i></span
                  >
                </div>
                <span class="tips" v-if="!videoList[0]"
                  >什么都没搜到哦 ^~^</span
                >
              </div>
            </el-tab-pane>

            <el-tab-pane label="专栏" name="post">
              <div class="post-box">
                <section
                  v-for="item in postList"
                  :key="item.id"
                  class="video-list"
                >
                  <div class="video-list-content">
                    <div class="top-box">
                      <h2 @click="toPostDesc(item.id)">
                        {{ item.title }}
                      </h2>
                    </div>
                    <div class="body-box">
                      <p>
                        {{
                          item.content
                            .replace(/&lt;[^>]+>/g, "")
                            .slice(0, 120)
                            .concat("...")
                        }}
                      </p>
                    </div>
                    <div class="bottom-box">
                      <span
                        ><i class="date">{{ item.upload_date }}</i></span
                      >
                    </div>
                  </div>
                  <div class="video-list-cover">
                    <img :src="item.cover" alt="" />
                  </div>
                </section>

                <span class="tips" v-if="!postList[0]">什么都没搜到哦 ^~^</span>
              </div>
            </el-tab-pane>

            <el-tab-pane label="用户" name="user">
              <div class="user-box">
                <div class="user-item" v-for="item in userList" :key="item.id">
                  <div class="headpic">
                    <img
                      :src="item.user_pic"
                      alt=""
                      @click="toHomePage(item.id)"
                    />
                  </div>
                  <div class="userinfo">
                    <h2 @click="toHomePage(item.id)">{{ item.username }}</h2>
                    <p>
                      {{ item.user_desc }}
                    </p>
                    <el-button-group>
                      <el-button
                        v-if="item.isFollow === 0"
                        class="btn"
                        type="primary"
                        size="mini"
                        >关 注</el-button
                      >
                      <el-button v-else class="btn" type="primary" size="mini"
                        >已关注</el-button
                      >
                      <el-button
                        class="btn"
                        size="mini"
                        @click="toWhisper(item.id)"
                        >发消息</el-button
                      >
                    </el-button-group>
                  </div>
                </div>

                <span class="tips" v-if="!userList[0]">什么都没搜到哦 ^~^</span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NewTopNav from "@/components/NewTopNav";

export default {
  name: "Search",
  data: function () {
    return {
      searchValue: "",
      activeName: "video",

      videoList: [],
      userList: [],
      postList: [],
    };
  },

  components: {
    NewTopNav,
  },

  created() {
    this.searchValue = this.$route.params.searchValue;
    if (this.searchValue != "") {
      this.getSearch();
    }
  },

  methods: {
    getSearch() {
      // console.log(this.searchValue);
      if (this.searchValue == "") {
        return;
      }

      this.getSearchVideo(this.searchValue);
      this.getSearchPost(this.searchValue);
      this.getSearchUser(this.searchValue);
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },

    getSearchVideo(searchValue) {
      this.axios
        .post(`search/video`, {
          searchValue,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.videoList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getSearchUser(searchValue) {
      this.axios
        .post(`search/user`, {
          searchValue,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.userList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getSearchPost(searchValue) {
      this.axios
        .post(`search/post`, {
          searchValue,
        })
        .then((response) => {
          if (response.data.status == 200) {
            console.log(response);
            this.postList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toVideoDesc(id) {
      // this.$router.push(`/video/${id}`);
      const res = this.$router.resolve(`/video/${id}`);
      window.open(res.href, "_blank");
    },

    toPostDesc(id) {
      const res = this.$router.resolve(`/post/${id}`);
      window.open(res.href, "_blank");
    },

    toWhisper(id) {
      const res = this.$router.resolve(`/whisper/${id}`);
      window.open(res.href, "_blank");
    },

    toHomePage(id) {
      const res = this.$router.resolve(`/homepage/${id}`);
      window.open(res.href, "_blank");
    },
  },
};
</script>

<style lang="scss">
.search[data-v-search] {
  .el-tabs__nav {
    height: 50px;
  }

  .el-tabs__item {
    font-size: 18px;
  }
}
</style>

<style lang="scss" scoped>
.search[data-v-search] {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  > .top-box {
    position: fixed;
    top: 0;
    width: 100%;
    height: 65px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 0 6px #eee;
    z-index: 100;
  }

  > .body-box {
    width: 100%;
    // padding: 10px 0;
    margin-top: 65px;
    padding: 0 200px;

    .body-header {
      display: flex;
      width: 100%;
      height: 140px;

      .search-input {
        width: 600px;
        height: 60px;
        line-height: 60px;
        margin: auto;
      }
    }

    .body-content {
      width: 100%;
      padding-bottom: 20px;

      .video-box {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        width: 100%;

        .video-item {
          width: 294px;
          margin-right: 10px;
          margin-bottom: 25px;
          box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
            0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);

          img {
            display: block;
            width: 100%;
            height: 160px;
            border-radius: 6px;
            object-fit: cover;
            cursor: pointer;
          }

          p {
            width: 100%;
            height: 3.5em;
            padding: 4px 10px;
          }

          span {
            display: inline-block;
            width: 100%;
            height: 2em;

            i {
              font-style: normal;
              color: #636161;
            }

            i:first-child {
              margin: 0 10px;
              font-size: 18px;
              color: #333;
              cursor: pointer;
            }

            i:first-child:hover {
              color: #fb7299;
            }
          }
        }
      }

      .post-box {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        width: 100%;

        .video-list {
          display: flex;
          align-items: center;
          width: 100%;
          height: 200px;
          margin-bottom: 15px;
          padding: 0 20px;
          border: 1px solid #eee;
          border-radius: 10px;
          // box-shadow: 0 0 0 #eee;

          .video-list-cover {
            width: 290px;
            height: 180px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 8px;
              cursor: pointer;
            }
          }

          .video-list-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            height: 180px;

            .top-box {
              h2 {
                display: inline-block;
                font-size: 22px;
                font-weight: 700;
                cursor: pointer;
              }

              h2:hover {
                color: #fb7299;
              }
            }

            .body-box {
              height: 110px;
              p {
                padding-right: 10px;
                font-size: 18px;
                color: #636161;
              }
            }

            .bottom-box {
              span {
                i {
                  font-size: 16px;
                  font-style: normal;
                  color: #636161;
                  margin-right: 40px;
                }
              }
            }
          }
        }
      }

      .user-box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .user-item {
          display: flex;
          width: 33%;
          height: 130px;
          margin-bottom: 45px;

          .headpic {
            display: flex;
            justify-content: center;
            width: 25%;
            height: 100%;

            img {
              width: 90px;
              height: 90px;
              border-radius: 50%;

              cursor: pointer;
            }
          }

          .userinfo {
            width: 75%;
            height: 100%;

            h2 {
              font-size: 20px;
              font-weight: 700;
              cursor: pointer;
            }

            h2:hover {
              color: #fb7299;
            }

            p {
              margin: 8px 0 15px 0;
              font-size: 16px;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .btn {
              border-radius: 4px;
            }

            .btn:first-child {
              margin-right: 8px;
            }
          }
        }
      }

      .tips {
        margin: 60px auto;
        color: #666;
      }
    }
  }
}
</style>